<template>
  <div>
    <Step1 ref="step3" :user-info="userInfo" @update="updateHandle" />
    <Step4 ref="step4" :form-detail="siteDetail" />
    <Step2 ref="step2" :form-detail="enterpriseDetail" />
    <Step3 ref="step3" :form-detail="enterpriseDetail" />
    <div class="handle-bottom-box">
      <el-button @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Step1 from './Step1.vue'
import Step4 from './Step4.vue'
import Step2 from './Step2.vue'
import Step3 from './Step3.vue'
import { getUserDetail } from '@/api/system'

export default {
  name: 'UserInfo',
  components: {
    Step1,
    Step4,
    Step2,
    Step3
  },
  data() {
    return {
      map: '', // 地图实例
      industryCode: '',
      userInfo: {},
      enterpriseDetail: {},
      siteDetail: {}
    }
  },
  computed: {
    ...mapGetters([
      'currentSite',
      'currentEnterprise'
    ])
  },

  created() {
    this.getDetail()
  },

  methods: {

    // 获取详情
    getDetail() {
      const data = {
        id: this.currentEnterprise.accountId,
        enterpriseId: this.currentEnterprise.id,
        siteId: this.currentSite.id
      }
      getUserDetail(data).then(res => {
        this.userInfo = res || {}
        this.enterpriseDetail = res.enterpriseResp || {}
        if (this.enterpriseDetail?.siteResps.length) {
          this.siteDetail = this.enterpriseDetail.siteResps[0]
        }
      }).catch(() => {})
    },

    // 更新页面数据
    updateHandle() {
      this.getUserDetail()
    },

    // 返回
    goBack() {
      this.$router.back()
    }

  }
}
</script>

<style lang="scss" scoped>
.handle-bottom-box{
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
  height: 60px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}
</style>
